<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />
<link rel="stylesheet" type="text/css" href="../../css/upload/fileinput.css" />

<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/upload/fileinput.js"></script>
<script type="text/javascript" src="../../js/login/jquery.form.min.js"></script>

<link rel="stylesheet" type="text/css" href="../../css/bootstrapValidator.min.css" />
<script type="text/javascript" src="../../js/bootstrapValidator.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12" style="padding-bottom: 10px">
				<%@include file="../common/header.jsp"%>
			</div>
		</div>
		<div class="row clearfix"  style="height:400px">
			<div class="col-md-12">
				<h4 class="heading">忘记密码</h4>
				<div class="myline"></div>
				<form class="form-horizontal" enctype="multipart/form-data" style="padding-top: 50px" id="changeForm" method="post">
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-5">
							<div class="form-group">
								<label class="col-md-3 control-label">手机号:</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="telephonename" id="telephonename">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">手机验证码:</label>
								<div class="col-md-9">
									<div class="input-group">
										<input type="text" class="form-control" name="checkphone" id="checkphone"> <span class="input-group-btn">
											<button class="btn btn-default" id="btnSendCode" onclick="sendMessage()">点击获取验证码</button>
										</span>

									</div>
								</div>

							</div>

							<center>
								<div class="form-group sepH_c">
									<div class="col-md-12">
										<button type="button" class="btn  btn-info" onclick="nextStep()">下一步</button>
									</div>
								</div>
							</center>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-12" style="padding-bottom: 10px">
				<%@include file="../common/bottom.jsp"%>
			</div>
		</div>
	</div>
</body>
<script>
	//短信验证码    
	var InterValObj; //timer变量，控制时间      
	var count = 60; //间隔函数，1秒执行      
	var curCount;//当前剩余秒数      
	var code = ""; //验证码      
	var codeLength = 6;//验证码长度   
	function sendMessage() {
		curCount = 120;
		//获取手机号码
		var jbPhone = $("#telephonename").val();
		//手机号码不为空
		if (jbPhone != "") {
			for (var i = 0; i < codeLength; i++) {
				code += parseInt(Math.random() * 9).toString();
			}
			// 设置button效果，开始计时      
			$("#btnSendCode").attr("disabled", "true");
			$("#btnSendCode").text(curCount + "秒后重新获取");
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次      
			// 向后台发送处理数据 
			var content = "【创新人才】您本次重置密码的验证码是" + code + "，请确保本人操作，切勿将验证码泄露给他人！";		
			$.ajax({
				type : "get", // 用POST方式传输   
				async: false,
				dataType: "jsonp",  
	            jsonp: "callback",
	            jsonpCallback:"callback",
				crossDomain:true,  
				url : "http://211.149.203.162:8868/sms.aspx", // 目标地址      
				data : {
					"action" : "send",
					"userid" : "195",
					"account" : "sxrcfz",
					"password" : "cxrc85309181",
					"mobile" : jbPhone,
					"content" : content,
					"sendTime" : "",
					"extno" : ""
				}, 
				error : function() {
					 alert("验证码已发送，请查看手机");
				},
				success : function(data) {
					
				}
			});
		}
	}
	
	//timer处理函数      
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj);// 停止计时器      
			$("#btnSendCode").removeAttr("disabled");// 启用按钮      
			$("#btnSendCode").text("重新发送验证码");
			
			code = ""; // 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
		} else {
			curCount--;
			$("#btnSendCode").text(curCount + "秒后重新获取");
		}
	}

	//点击注册按钮
    function nextStep(){
    	var bootstrapValidator = $("#changeForm").data('bootstrapValidator');
    	$('#changeForm').bootstrapValidator('validate');  	 	
	    if (bootstrapValidator.isValid()) {

			window.location.href = "changepwdTwo.jsp?user_id="
					+ $("#telephonename").val();
		}
	}
	$(document).ready(function() {
		$('#changeForm').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				telephonename : {
					message : '手机号码无效',
					validators : {
						notEmpty : {
							message : '手机号码不能为空'
						},
						stringLength : {
							min : 11,
							max : 11,
							message : '请输入11位手机号码'
						},
						regexp : {
							regexp : /^1[3|5|8]{1}[0-9]{9}$/,
							message : '请输入正确的手机号码'
						},
						threshold : 11, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
						remote : {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
							url : '../permission/haveuserno',//验证地址
							message : '该用户不存在',//提示消息           
							delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
							type : 'POST'//请求方式                       
						/**自定义提交数据，默认值提交当前input value
						 *  data: function(validator) {
						      return {
						          password: $('[name="passwordNameAttributeInYourForm"]').val(),
						          whatever: $('[name="whateverNameAttributeInYourForm"]').val()
						      };
						   }
						 */
						}
					}
				},
				checkphone : {
					message : '验证码错误',
					validators : {
						notEmpty : {
							message : '手机验证码不能为空'
						},
						stringLength : {
							min : 6,
							max : 6,
							message : '请输入6位手机验证码'
						},
						callback : {/*自定义，可以在这里与其他输入项联动校验*/
							message : '验证码错误',
							callback : function(value, validator, $field) {
								return value === code;
							}
						}
					}
				}
			}
		});
	});
</script>
</html>